<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: whitesmoke">
    <div style="width: 100%;height: 55px;background: white;display: flex">
      <div style="font-family: 'Avenir';font-size: 20px;margin: 17px 0 0 15px;width: 12%;display: flex" @click="fanhui">
        <van-icon name="arrow-left"/>
      </div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 72%;">二维码生成</div>
      <div style="margin: 18px 0 0 0px;width: 18%;font-size: 14px"></div>
    </div>
    <div class="big">
      <div class="three">
        <van-field
            class="three1"
            v-model="url"
            rows="2"
            autosize
            type="textarea"
            placeholder="请输入二维码内容"
            show-word-limit
        />
      </div>
      <van-uploader v-model="fileList" multiple :max-count="1"/>
      <van-image :src="this.img" style="width: 300px;height: 300px"></van-image>
    </div>
    <van-button type="primary" style="width: 80%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 20px; border-radius:50px;" @click="submit">生成
    </van-button>
  </div>
</template>

<script>
import {getInfoByQrcode} from "@/api/SetUp/QrCore/QrCore";
import {add, file ,file2} from "@/api/SetUp/feedback/feedback"

export default {
  data() {
    return {
      url: "",
      img: null,
      fileList: [],
      QrCode: {},
    };
  },
  created() {

  },
  methods: {
    submit() {
      const forms = new FormData();
      forms.append("file", this.fileList[0].file);
      getInfoByQrcode(forms).then(row => {
        file2().then(ror => {
          this.img = ror.data;
        })
      })
    },
    async fetchImage() {
      const response = await fetch('/api/image'); // 假设这是获取图像的API路径
      if (response.ok) {
        this.img = URL.createObjectURL(await response.blob());
      }
    },
    fanhui() {
      this.$router.push('/setUp')
    },
  }
}

</script>

<style scoped>
.big {
  width: 100%;
  height: 530px;
  background: white;
  margin-top: 15px;
}

.three {
  width: 95%;
  height: 200px;
  margin: 10px 0 0 11px;
  border-top: whitesmoke 2px solid;
}

.three1 {
  width: 100%;
  height: 100%;
}

</style>
<!--// let url=window.URL.createObjectURL(new Blob([row.data], {type: "image/png"}))-->
<!--//   this.img=url;-->
<!--// console.log(this.img)-->

